"use client"

import { type LucideIcon, MoreHorizontal } from "lucide-react"

import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"
import {
   SidebarGroup,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
} from "~/registry/miami/ui/sidebar"

export function NavMain({
   items,
}: {
   items: {
      title: string
      url: string
      icon?: LucideIcon
      isActive?: boolean
      items?: {
         title: string
         url: string
      }[]
   }[]
}) {
   const { isMobile } = useSidebar()

   return (
      <SidebarGroup>
         <SidebarMenu>
            {items.map((item) => (
               <DropdownMenu key={item.title}>
                  <SidebarMenuItem>
                     <DropdownMenuTrigger asChild>
                        <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                           {item.title} <MoreHorizontal className="ml-auto" />
                        </SidebarMenuButton>
                     </DropdownMenuTrigger>
                     {item.items?.length ? (
                        <DropdownMenuContent
                           side={isMobile ? "bottom" : "right"}
                           align={isMobile ? "end" : "start"}
                           className="min-w-56 rounded-lg"
                        >
                           {item.items.map((item) => (
                              <DropdownMenuItem asChild key={item.title}>
                                 <a href={item.url}>{item.title}</a>
                              </DropdownMenuItem>
                           ))}
                        </DropdownMenuContent>
                     ) : null}
                  </SidebarMenuItem>
               </DropdownMenu>
            ))}
         </SidebarMenu>
      </SidebarGroup>
   )
}
